<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">
		<title>开机引导</title>

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html, body{
				width: 100%;
				height: 100%;
			}
			#close {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 10%;
				padding: 5px 20px;
				color: #159deb;
				font-size: 18px;
				border: 1px solid #159deb;
				background: none;
			}
			
			.guide{
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100% 100%;
			}
			
			.guide img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item guide">
					<img src="../images/lauch/guide/guide1.png" alt="" />
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item guide">
					<img src="../images/lauch/guide/guide2.png" alt="" />
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item guide">
					<img src="../images/lauch/guide/guide3.png" alt="" />
					<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				if (mui.os.ios) {
					plus.navigator.setFullscreen(true);
				}
//				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.setFullscreen(false);
				//显示main页面
				mui.openWindow({
					url: '../main.html',
					id: 'main',
					show: {
						aniShow: 'none'
					},
					waiting: {
						autoShow: false
					}
				});
			}, false);
			//图片切换时，触发动画
//			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//				//注意slideNumber是从0开始的；
//				var index = event.detail.slideNumber + 1;
//				if (index == 2 || index == 3) {
//					var item = document.getElementById("tips-" + index);
//					if (item.classList.contains("mui-hidden")) {
//						item.classList.remove("mui-hidden");
//						item.classList.add("guide-show");
//					}
//				}
//			});
		</script>
	</body>

</html>